<!-- 中英文切换 -->
<template>
    <div title="切换语言">
        <el-dropdown @command="hadleCommand" trigger="click">
            <span class="el-dropdown-link" style="color: #74BCFF;cursor: pointer;">
                <span>{{language=='en'?'English':'中文'}}</span>
                <el-icon class="el-icon--right">
                    <arrow-down />
                </el-icon>
            </span>
            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item command="zh" :disabled="language=='zh'">中文</el-dropdown-item>
                    <el-dropdown-item command="en" :disabled="language=='en'">English</el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown>
    </div>
</template>
<script lang="ts" setup>
import { ArrowDown, } from '@element-plus/icons-vue'
import {ref} from "vue";
import { useI18n} from "vue-i18n";
import { ElMessage } from 'element-plus'
const {locale} = useI18n()
console.log(locale)

let language = ref(localStorage.getItem("language")||"zh")
const hadleCommand = (e:string)=>{
    language.value = e
    localStorage.setItem("language",e)
    locale.value = e
    ElMessage.success("设置成功")
}

</script>
<style scoped>
.block-col-2 .demonstration {
    display: block;
    color: var(--el-text-color-secondary);
    font-size: 14px;
    margin-bottom: 20px;
}
</style>